<!--
 * @Descripttion: 
 * @version: 
 * @Author: cyj
 * @Date: 2023-03-22 17:01:21
-->
<template>
  <view class="register">
    <view class="top">
      <span class="back" @click="gotoLogin">
        <image src="../../static/images/common/back.png" mode=""></image>
      </span>
    </view>
    <view class="logo">
      <uni-icons type="person" size="120" color="#a1a1a1"></uni-icons>
      <span style="opacity: 0.7;">注册</span>
    </view>
    <!-- 注册表单 -->
    <view class="data">
      <uni-forms ref="form" :modelValue="info" :rules="UserRules" validateTrigger='bind'>
        <uni-forms-item label="用户名" name="username" required>
          <uni-easyinput v-model="info.username" placeholder="请输入用户名" />
        </uni-forms-item>
        <uni-forms-item label="邮箱" required name="email">
          <uni-easyinput v-model="info.email" placeholder="请输入邮箱" />
        </uni-forms-item>
        <uni-forms-item label="密码" required name="password">
          <uni-easyinput type="password" trim='all' v-model="info.password" placeholder="请输入密码" />
        </uni-forms-item>
        <uni-forms-item label="确认密码" required name="checkpwd">
          <uni-easyinput type="password" trim='all' v-model="info.checkpwd" placeholder="请再次输入密码" />
        </uni-forms-item>
      </uni-forms>
      <button class="button" @click="submit" :disabled="!info.isOk" :class="info.isOk ? '' : 'noregister'">注册</button>
    </view>
  </view>
</template>

<script setup>
  import {
    reactive,
    ref,
    watch,
    computed,
    getCurrentInstance,
    onMounted
  } from 'vue'
  const info = reactive({
    username: '',
    email: '',
    password: '',
    checkpwd: '',
    isOk: false, //判断注册是否填写信息完成
  })
  const UserRules = ref({
    username: {
      rules: [{
        required: true,
        errorMessage: '用户名不能为空!'
      }, {
        //自定义规则
        validateFunction: function(rule, value, data, callback) {
          if (value.length < 2) {
            callback('至少输入两位数')
          }
          return true
        }
      }]
    },
    email: {
      //[\w]+ 匹配至少一个数字、字母、下划线的字符 (.[\w]+)* 总的意思是匹配0次或多次 点.+数字或字母或下划线
      rules: [{
        required: true,
        errorMessage: '邮箱不能为空!'
      }, {
        validateFunction: function(rule, value, data, callback) {
          //邮箱判定规则
          let reg = /^([a-zA-Z\d][\w-]{2,})@(\w{2,})\.([a-z]{2,})(\.[a-z]{2,})?$/
          let res = reg.test(value)
          if (!res) { //不符合规范
            callback('输入的邮箱不符合邮箱规范')
          }
          return true
        }
      }]
    },
    password: {
      rules: [{
        required: true,
        errorMessage: '密码不能为空'
      }, {
        validateFunction: function(rule, value, data, callback) {
          if (value.length < 6)
            callback('至少输入6位数')
          return true
        }
      }, {
        maxLength: 12,
        errorMessage: '密码最多不能超过12位!'
      }]
    },
    checkpwd: {
      rules: [{
        validateFunction: function(rule, value, data, callback) {
          if (value != info.password)
            callback('两次输入的密码不一致')
          return true
        }
      }]
    }
  })
  const instance = getCurrentInstance()
  const form = ref(null)

  info.isOk = computed(() => {
    if (info.username && info.email && info.password && info.checkpwd)
      return true
    return false
  })
  //点击注册
  function submit() {
    //如果验证成功
    form.value.validate().then(res => {
      //调用后端接口
      uni.request({
        url: `${instance.proxy.serverUrl}/api/register`,
        data: res,
        method: 'POST',
        success: (data) => {
          if (data.data.code != 200) {
            uni.showToast({
              title: data.data.message,
              icon: 'error',
            })
            return;
          } else {
            uni.showToast({
              title: '注册成功！'
            })
            info.checkpwd = ''
            info.password = ''
            info.username = ''
            info.email = ''
            //3秒后跳转到登录界面
            setTimeout(() => {
              uni.navigateTo({
                url: `/pages/login/login`
              })
            }, 3000)
            //clearTimeout(timer) //随即清除延时器
          }
        },

      })
    }).catch(err => {
      uni.showToast({
        title: '上述信息输入有误',
        icon: 'error'
      })
    })
  }

  //前往登录界面
  function gotoLogin() {
    uni.navigateTo({
      url: '/pages/login/login'
    })
  }

  onMounted(() => {
    form.value = instance.refs.form
  })
</script>

<style lang="scss" scoped>
  .register {
    background-image: linear-gradient(rgb(237, 252, 255), rgb(232, 223, 167) 80%);
    // background: url('../../static/images/common/VCG211285755496.gif');
    height: 1240rpx;

    .top {
      padding-top: 20rpx;
      margin-left: 20rpx;
      margin-right: 20rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .back {
        height: 48rpx;
        width: 48rpx;

        image {
          height: 100%;
          width: 100%;
        }
      }
    }

    .logo {
      margin-top: 60rpx;
      align-items: center;
      display: flex;
      flex-direction: column;

      span {
        font-size: 36rpx;
        color: var(--text-color);
      }

    }

    .data {
      position: relative;
      margin: 30rpx 40rpx 40rpx;
    }
  }

  .uni-forms-item[data-v-61dfc0d0] {
    margin-bottom: 45rpx;
  }

  :deep(.uni-forms-item__label[data-v-61dfc0d0]) {
    padding: 0px;
  }

  .noregister {
    background: var(--bg-color-hover);
    opacity: 1;
    border: var(--van-button-border-width) solid var(--bg-color-hover);
  }
</style>
